<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>select</title>
  <style>
#main {
  position: relative;
  z-index: 5;
  height: 300px;
  width: 300px;
  color: #000;
  font-size: 100%;
  padding: 20px;
}

#main::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../images/pattern3.png);
    opacity: .2;
}

  #btnChk{
  	width:43px;
  	height:43px;
  	margin-left:5px;
  	border-radius:10px;
  	background-image: url(../images/50percent.png);
  	background-size: 40px;
  	//filter: alpha(opacity=50);
  	
  }
  #sel{
  	width: 210px;
  	//border:1px solid black;
  	text-align: center;
  }
  </style>
  <script>
  	window.onload = function(){
  		var btn = document.getElementById("btnChk");
  		btn.onclick = function(){
  			var s = frm.sel;
  			var pos = s.selectedIndex;
  			alert(pos + "번째가 선택\n" + "선택된 항목은 " + s[pos].text + " 과목");
  		}
  	}
  </script>
</head>

<body>
	<div id="main">
	<font color=""><h1>상자 제어하기</h1></font>
	<div style="border:5px dotted pink; width: 220px; padding: 10px;">
		<form name="frm" action="" method="post">
			<h3>수강할 과목을 선택하세요</h3>
			<div id="sel">
			<select name="sel" size="1">
				<option value="HTML">HTML</option>
				<option value="CSS">CSS</option>
				<option value="JAVASCRIPT">JAVASCRIPT</option>
				<option value="JSP">JSP</option>
				<option value="AJAX">AJAX</option>
	
			</select>
			</div>
			<p/>
			<div style="color:red; font-size: 20px; font-weight: bold;"> 오늘만 이가격 ->
			<input type="button" value=" " id="btnChk">
			</div>
		</form>
	</div>
	</div>
</body>
</html>
